<template>
  <div id="account_view">

    <div class="absolute" style="z-index:10001">
      <Login v-if="$store.state.account.show_login"></Login>
    </div>

    <div class="absolute" style="z-index:10002">
      <transition enter-active-class="animated slideInRight" leave-active-class="animated slideOutRight">
        <Register v-if="$store.state.account.show_register"></Register>
      </transition>
    </div>

    <div class="absolute" style="z-index:10002">
      <transition enter-active-class="animated slideInRight" leave-active-class="animated slideOutRight">
        <FindPwd v-if="$store.state.account.show_findpwd"></FindPwd>
      </transition>
    </div>

    <div class="absolute" style="z-index:10003">
      <transition enter-active-class="animated slideInRight" leave-active-class="animated slideOutRight">
        <NewPwd v-if="$store.state.account.show_newpwd"></NewPwd>
      </transition>
    </div>

  </div>
</template>
<script>
import Login from "./account_component/Login";
import Register from "./account_component/Register";
import FindPwd from "./account_component/FindPwd";
import NewPwd from "./account_component/NewPwd";

export default {
  name: "account_view",
  components: {
    Login,
    Register,
    FindPwd,
    NewPwd
  }
};
</script>








<style lang="less" scoped>
#account_view {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  height: 100%;
  background-color: #1c83fc;
  width: 100%;
}
.absolute {
  position: absolute;
  top: 0;
  left: 0;
}
</style>

